    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Class Configuration</title>
    <link href=   "css/jquery-ui-1.8.11.custom.css"    rel="stylesheet" type="text/css" />
 
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/css/ui.multiselect.css" />
     <script src=  "js/jqgrid/jquery-1.5.2.min.js"  type="text/javascript"></script> 
    <script  src=   "js/jqgrid/grid.locale-en.js"  type="text/javascript"></script>
    <script  src=   "js/jqgrid/jquery.jqGrid.min.js"   type="text/javascript"></script>
    <script  src=   "js/jqgrid/grid.formedit.js"    type="text/javascript"></script> 
    <script  src=   "js/jqgrid/jquery.jqGrid.src.js"    type="text/javascript"></script>
     
 
 <script   type="text/javascript">

 

 
 $(document).ready(function() { 
	 var teachers =$.ajax(
			 {url: 'teacherList.htm', 
				 async: false, 
				 success: function(data, result) {
					    
					 if (!result) alert('Failure to retrieve the teachers.');
						

					 }			 }).responseText;

	 var subjects =$.ajax(
			 {url: 'subjectList.htm', 
				 async: false, 
				 success: function(data, result) {
					    
					 if (!result) alert('Failure to retrieve the teachers.');
						

					 },  
				failure: function(data, result) {
				    
					    alert('Failure to retrieve the Countries.');
						window.alert(data);

					 }
			 }).responseText;
	 
	 window.alert(teachers);	
	 jQuery("#gridClass").jqGrid({ 
		 url:'classInformation.htm?q=2',
		 editurl:"addClass.htm",
		  datatype: "json", 
		  colNames:['StandardID','Standard', 'Section', 'Class Teacher','Comments'], 
		  colModel:[ 
		  {name:'id',index:'id', width:70, resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20}}, 
		  {name:'grade',index:'grade', width:90, resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20}}, 
		  {name:'section',index:'section', width:100, resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20}}, 
		  {name:'teacher',index:'teacher', width:120, align:"right", resizable: true, hidden: false, viewable: true,editable:true,edittype:"select", editoptions:{size:50, value: teachers}}, 
		  {name:'comments',index:'comments', width:125,align:"right"} ],
		  rowNum:10,
		  rowList:[10,20,30], 
		  pager: '#pageClass', 
		  sortname: 'id', 
		  viewrecords: true, 
		  sortorder: "desc",
		  multiselect: false, 
		  caption: "Class Information", 
		  onSelectRow: function(ids) { 
		 			if(ids == null) { 
						 				ids=0; 
						 				if(jQuery("#gridSubject").jqGrid('getGridParam','records') >0 )
							 		   { 
						 				jQuery("#gridSubject").jqGrid('setGridParam',{url:"subjectDetails.htm?q=1&id="+ids,page:1}); 
						 				jQuery("#gridSubject").jqGrid('setCaption',"Subject Details of : "+ids) .trigger('reloadGrid');
						 				jQuery("#gridTimetable").jqGrid('setGridParam',{url:"timeTableDetails.htm?q=1&id="+ids,page:1}); 
						 				jQuery("#gridTimetable").jqGrid('setCaption',"Time Table Details of : "+ids) .trigger('reloadGrid');
		 				               }
		 				            }
		 			else { 
			 			jQuery("#gridSubject").jqGrid('setGridParam',{url:"subjectDetails.htm?q=1&id="+ids,page:1}); 
		 				jQuery("#gridSubject").jqGrid('setCaption',"Subject Details of : "+ids) .trigger('reloadGrid'); 

		 				jQuery("#gridTimetable").jqGrid('setGridParam',{url:"timeTableDetails.htm?q=1&id="+ids,page:1}); 
		 				jQuery("#gridTimetable").jqGrid('setCaption',"Time Table Details of : "+ids) .trigger('reloadGrid'); 
		 				}
		 				} }); 

	 var addOptions = {mtype: "POST", reloadAfterSubmit:false};

	 jQuery("#gridClass").jqGrid('navGrid', '#pageClass', { add: true, view: true, del: true, edit: true }, {}, // edit options
             addOptions , // add options
             {}, // del options
             {}, // search options
             {   // vew options
             beforeShowForm: function(form) {
              
             },
             afterclickPgButtons: function(whichbutton, form, rowid) {

             
                  
             }
         });
		
		 	jQuery("#gridClass").jqGrid('navGrid','#pageClass',{add:true,edit:true,del:true}); 

		 	
		 	jQuery("#gridSubject").jqGrid({ 
		 	height: 100, 
		 	url:'subjectDetails.htm?q=1&id=0',  
			 editurl:"addSubject.htm",
		 	datatype: "json", 
		 	colNames:['No','Subject', 'Teacher', 'Comments' ], 
		 	colModel:[ {name:'num',index:'num', width:55, resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20}}, 
		 	{name:'subject',index:'subject', width:120, align:"right", resizable: true, hidden: false, viewable: true,editable:true,edittype:"select", editoptions:{size:50, value: teachers}},
		 	{name:'teacher',index:'teacher', width:120, align:"right", resizable: true, hidden: false, viewable: true,editable:true,edittype:"select", editoptions:{size:50, value: teachers}},
		 	{name:'comments',index:'comments', width:125, align:"right", resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20}} ],
		 	rowNum:5, rowList:[10,20], 
		 	pager: '#pagerSubject', 
		 	sortname: 'item',
		 	viewrecords: true,
		 	sortorder: "asc", 
		 	multiselect: true, 
		 	caption:"Subject Details" }).navGrid('#pagerSubject',{add:true,edit:true,del:true});


		 	 var addOptions = {mtype: "POST", reloadAfterSubmit:false};

			 jQuery("#gridSubject").jqGrid('navGrid', '#pagerSubject', { add: true, view: true, del: true, edit: true }, {}, // edit options
		             addOptions , // add options
		             {}, // del options
		             {}, // search options
		             {   // vew options
		             beforeShowForm: function(form) {
		              
		             },
		             afterclickPgButtons: function(whichbutton, form, rowid) {

		             
		                  
		             }
		         });

		 	
		 	jQuery("#ms1").click( function() { var s; s = jQuery("#gridSubject").jqGrid('getGridParam','selarrrow'); alert(s); });

 

		 	$("#gridTimetable").jqGrid({
		         url : 'timeTableDetails.htm', 
		         datatype: 'json',
		         mtype: 'GET',
		         caption: '',
		         colNames: ['Periods', 'Mon', 'Tue', 'Wed','Thus' , 'Fri', 'Sat','Sun'],
		         colModel: [
		         { name: 'Periods', index: 'Periods', width: 13, resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20} },
		         { name: 'mon', index: 'mon', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
		         { name: 'tue', index: 'tue', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
		         { name: 'wed', index: 'wed', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
		         { name: 'thus', index: 'thus', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,editoptions:{size:30}} ,
		         { name: 'fri', index: 'fri', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
		         { name: 'sat', index: 'sat', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
		         { name: 'sun', index: 'sun', searchoptions: { sopt: ['cn'] }, width: 15,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} 
		     
		         
		],

		         loadtext: 'Loading..',
		         multiselect: true,
		         pager: $("#pagerTimetable"),
		         rowNum: 10,
		         rowList: [10, 20, 50],
		         sortname: 'firstName',
		         sortorder: 'asc',
		         viewrecords: true,
		         height: "100%",
		         width: 700,
		         imgpath: '../scripts/jqgrid/themes/basic/images',
		        
		         caption: "Time table",
		         editurl:"addTimetable.htm"

		     });
		     var addOptions = {mtype: "POST", reloadAfterSubmit:false};
		     jQuery("#gridTimetable").jqGrid('navGrid', '#pagerTimetable', { add: true, view: true, del: true, edit: true }, {}, // edit options
		             addOptions , // add options
		             {}, // del options
		             {}, // search options
		             {   // vew options
		             beforeShowForm: function(form) {
		              
		             }
		         });

 });
		  </script> 
</head>
<body>

<form action="createTeacher.htm" method="post" id="add-teacher-form-id" name="add-teacher-form" modelAttribute="user"  >
 
 
   <br /> 
  
  <table>
  <tr> 
  <td align="center" style="width: 100%; height:100%;"   >
   <table id="gridClass">
  </table> <div id="pageClass"></div>
  </td>
  </tr>
  <tr>
  <td align="left" style="  height:100%">
   <table id="gridSubject"></table> 
   <div id="pagerSubject" ></div>
  </td>
  </tr>
  
  </table>
  
   

 
</form>
</body>

</html>